<style type="text/css">
.tg {
  border-collapse: collapse;
  border-spacing: 0;
}
.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}
.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}
.tg .tg-c3ow {
  border-color: inherit;
  text-align: center;
  vertical-align: top;
}
.tg .tg-uys7 {
  border-color: inherit;
  text-align: center;
}
.tg .tg-xldj {
  border-color: inherit;
  text-align: left;
}
.tg .tg-0pky {
  border-color: inherit;
  text-align: left;
  vertical-align: top;
}
.tg .tg-0lax {
  text-align: left;
  vertical-align: top;
}
</style>
<template>
  <div id="samplesample">
    <br>
    <table class="tg" style="undefined;table-layout: fixed; width: 1044px">
      <colgroup>
        <col style="width: 68px">
        <col style="width: 364px">
        <col style="width: 116px">
        <col style="width: 496px">
      </colgroup>
      <tr>
        <th class="tg-uys7" colspan="4">
          <span style="font-weight:bold">服务确认单</span>
        </th>
      </tr>
      <tr>
        <td class="tg-xldj">接修日期</td>
        <td class="tg-xldj">{{info.service.startTime}}</td>
        <td class="tg-xldj">维修编号</td>
        <td class="tg-xldj">{{info.service.sId}}</td>
      </tr>
      <tr>
        <td class="tg-xldj">产品类型</td>
        <td class="tg-xldj">{{info.device.devType == 1 ? "台式机" : "其他"}}</td>
        <td class="tg-xldj">机器品牌</td>
        <td class="tg-xldj">{{info.device.devBrand}}</td>
      </tr>
      <tr>
        <td class="tg-xldj">机器型号</td>
        <td class="tg-xldj">{{info.device.devMix}}</td>
        <td class="tg-xldj">系列号</td>
        <td class="tg-xldj">{{info.device.series}}</td>
      </tr>
      <tr>
        <td class="tg-0pky">联系人</td>
        <td class="tg-0pky">{{info.service.cName}}</td>
        <td class="tg-0pky">预计完成时间</td>
        <td class="tg-0pky">{{info.service.endTime}}</td>
      </tr>
      <tr>
        <td class="tg-c3ow" colspan="4">机器故障现象</td>
      </tr>
      <tr>
        <td class="tg-0lax" colspan="4">{{info.device.faultDepression}}</td>
      </tr>
      <tr>
        <td class="tg-c3ow" colspan="2">缺少零件</td>
        <td class="tg-c3ow" colspan="2">其他</td>
      </tr>
      <tr>
        <td class="tg-0pky" colspan="2">{{info.device.lackPart}}</td>
        <td class="tg-0pky" colspan="2">无</td>
      </tr>
      <tr>
        <td class="tg-0lax" colspan="2">客户签字：</td>
        <td class="tg-0lax" colspan="2">确认时间：</td>
      </tr>
    </table>
    <br>
    <el-button size="large" type="success" @click="handleSure()">确认提交</el-button>
  </div>
</template>
<script>
import { clientSure, getServiceInfo } from "../../api/repair";
import { setMap, getMap } from "../../utils/dataStorage";
export default {
  data() {
    return {
      info: {}
    };
  },
  created() {
    this.getServiceInfo();
  },
  components: {},
  methods: {
    getServiceInfo() {
      let sId = getMap("sId");
      let param = new URLSearchParams();
      param.append("serviceId", sId);
      getServiceInfo(param)
        .then(r => {
          console.log(r);
          this.info = r;
        })
        .catch(_ => {
          console.log(_);
        });
    },
    handleSure() {
      let sId = getMap("sId");
      let param = new URLSearchParams();
      param.append("serviceId",sId);
      clientSure(param)
        .then(r => {
          setTimeout(() => {
            this.$notify({
              title: "服务单已经提交",
              message: "请提醒用户等待分配",
              type: "success"
            });
            this.$router.push({ path: "/service_list" });
          }, 1000);
        })
        .catch(_ => {
            console.log(_);
        });
    }
  }
};
</script>